<template>
  <div class="order">
    <a-card title="mqtt设备">
      <template #extra>
        <a-space>
          <a-button @click="getHistory">清零记录</a-button>
          <a-button @click="toFullScreen">大屏查看</a-button>
        </a-space>
      </template>

      <vxe-table border :data="tabelList" :row-config="{ isHover: true }" size="mini" min-height="100">
        <vxe-column title="设备名称" align="center">
          <template #default="{ row }"> {{ row.reset }} </template>
        </vxe-column>
        <vxe-column title="计数产量" align="center">
          <template #default="{ row }"> {{ row.count }} </template>
        </vxe-column>
        <vxe-column title="米数" align="center">
          <template #default="{ row }"> {{ row.length }} </template>
        </vxe-column>
        <vxe-column title="状态" align="center">
          <template #default="{ row }"> {{ row.status }} </template>
        </vxe-column>
        <vxe-column title="操作" align="center">
          <template #default="{ row }">
            <a-space>
              <a-button size="mini" type="primary" @click="showReset(row.id, row.length)">
                <template #default>清零</template>
              </a-button>
            </a-space>
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :page-sizes="[10, 50, 100, 500, 1000]"
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
      >
      </vxe-pager>
    </a-card>

    <a-modal v-model:visible="resetVisible" hide-title width="320px" @ok="reset">
      <div>确定清零吗？</div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './mqttDevice.ts';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion } from '@/utils/baseMethods';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup },
  setup() {
    const { base, toFullScreen, reset, getHistory, showReset } = importConfig();

    return {
      ...toRefs(base),
      EFTimeFormatConversion,
      toFullScreen,
      reset,
      getHistory,
      showReset,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.pollabel {
  font-size: 12px;
  color: #7b7b7b;
  &-value {
    font-size: 14px;
    color: #3e528e;
    font-weight: 900;
    padding-left: 10px;
  }
}
</style>
